<div class="tctj tctj-month bgwhite">
  <div nz-row>
    <div nz-col nzSpan="24">

      月份：<nz-month-picker [(ngModel)]="queryParam._monthStr" nzPlaceHolder="请选择月份"></nz-month-picker>
      &nbsp;&nbsp;&nbsp;
      类型：
      <nz-select class="wd150" nzAllowClear nzPlaceHolder="请选择" [(ngModel)]="queryParam.type">
        <nz-option *ngFor="let item of typeSelect" [nzValue]="item.value" [nzLabel]="item.label"></nz-option>
      </nz-select>
      &nbsp;&nbsp;&nbsp;
      <button nz-button nzType="primary" (click)="statistics()"><i nz-icon nzType="book"></i>统计</button>
      <button nz-button nzType="primary" (click)="export()"><i nz-icon nzType="export"></i>导出</button>

    </div>
  </div>
  <div nz-row>
    <div nz-col nzSpan="24">
      <h3 class="title">昆明局电务天窗修申请及兑现情况统计表</h3>
      <div class="tableTopBar">
        <div class="tbdw">填报单位：昆明南电务段</div>
        <div class="tjyf">
          {{main.tbsj}}
        </div>
        <div class="tjNumber">电信统表12</div>
      </div>
      <nz-spin [nzSpinning]="isSpinning">
        <table class="table text-center">
          <tr>
            <td class="center lable leftLable" rowspan="3" style="width: 2.5em;">天窗类别</td>
            <td class="center lable leftLable" rowspan="3" style="width: 3em;">段名</td>
            <td class="center lable leftLable" rowspan="3" style="width: 5em;">线别</td>
            <td class="center lable" colspan="6">申请兑现情况</td>
            <td class="center lable" colspan="6">计划兑现情况</td>
            <td class="center lable" rowspan="3" style="width:100px">天窗兑现情况及未完成原因分析</td>
          </tr>
          <tr>
            <!-- 申请兑现情况 -->
            <td class="center lable" colspan="3">次数</td>
            <td class="center lable" colspan="3">时间（分钟）</td>

            <!-- 计划兑现情况 -->
            <td class="center lable" colspan="3">次数</td>
            <td class="center lable" colspan="3">时间（分钟）</td>
          </tr>
          <tr>
            <!-- 申请兑现情况 -->
            <!-- 次数 -->
            <td class="center lable">申请</td>
            <td class="center lable">列入计划</td>
            <td class="center lable">兑现率</td>
            <!-- 时间（分钟） -->
            <td class="center lable">申请</td>
            <td class="center lable">列入计划</td>
            <td class="center lable">兑现率</td>

            <!-- 计划兑现情况 -->
            <!-- 次数 -->
            <td class="center lable">计划</td>
            <td class="center lable">兑现</td>
            <td class="center lable">兑现率</td>
            <!-- 时间（分钟） -->
            <td class="center lable">计划</td>
            <td class="center lable">兑现</td>
            <td class="center lable">兑现率</td>
          </tr>
          <tr *ngFor="let row of main.tableData.zhtc;let i = index">
            <td *ngIf="i==0" class="leftLable" [attr.rowspan]="main.tableData.zhtc.length">综合天窗</td>
            <td *ngIf="i==0" class="leftLable" [attr.rowspan]="main.tableData.zhtc.length">昆明局</td>
            <!-- 线别 -->
            <td nzAlign="center" class="leftLable">{{row.line}}</td>
            <!-- 申请兑现情况 -->
            <!-- 次数 -->
            <td>
              <!-- {{row.applyCount}} -->
              <a href="javascript:void(0)" (click)="queryDetail(row,'A')">{{row.applyCount}}</a>
            </td>
            <td>
              <!-- {{row.applyInplanCount}} -->
              <a href="javascript:void(0)" (click)="queryDetail(row,'B')">{{row.applyInplanCount}}</a>
            </td>
            <td>{{row.applyCountRate}}</td>
            <!-- 时间（分钟） -->
            <td nzAlign="center">{{row.applyTime}}</td>
            <td nzAlign="center">{{row.applyInplanTime}}</td>
            <td nzAlign="center">{{row.applyTimeRate}}</td>
            <!-- 计划兑现情况 -->
            <!-- 次数 -->
            <td>
              <!-- {{row.planCount}} -->
              <a href="javascript:void(0)" (click)="queryDetail(row,'C')">{{row.planCount}}</a>
            </td>
            <td>
              <!-- {{row.planCash}} -->
              <a href="javascript:void(0)" (click)="queryDetail(row,'D')">{{row.planCash}}</a>
            </td>
            <td>{{row.planCashRate}}</td>
            <!-- 时间（分钟） -->
            <td nzAlign="center">{{row.planTime}}</td>
            <td nzAlign="center">{{row.planCashTime}}</td>
            <td nzAlign="center">{{row.planCashTimeRate}}</td>

            <!-- 天窗兑现情况及未完成原因分析 -->
            <td>{{row.reason}}</td>
          </tr>
          <tr *ngFor="let row of main.tableData.cztc;let i = index">
            <td *ngIf="i==0" class="leftLable" [attr.rowspan]="main.tableData.cztc.length">垂直天窗</td>
            <td *ngIf="i==0" class="leftLable" [attr.rowspan]="main.tableData.cztc.length">昆明局</td>
            <!-- 线别 -->
            <td class="leftLable">{{row.line}}</td>
            <!-- 申请兑现情况 -->
            <!-- 次数 -->
            <td>
              <!-- {{row.applyCount}} -->
              <a href="javascript:void(0)" (click)="queryDetail(row,'A')">{{row.applyCount}}</a>
            </td>
            <td>
              <!-- {{row.applyInplanCount}} -->
              <a href="javascript:void(0)" (click)="queryDetail(row,'B')">{{row.applyInplanCount}}</a>
            </td>
            <td>{{row.applyCountRate}}</td>
            <!-- 时间（分钟） -->
            <td nzAlign="center">{{row.applyTime}}</td>
            <td nzAlign="center">{{row.applyInplanTime}}</td>
            <td nzAlign="center">{{row.applyTimeRate}}</td>

            <!-- 计划兑现情况 -->
            <!-- 次数 -->
            <td>
              <!-- {{row.planCount}} -->
              <a href="javascript:void(0)" (click)="queryDetail(row,'C')">{{row.planCount}}</a>
            </td>
            <td>
              <!-- {{row.planCash}} -->
              <a href="javascript:void(0)" (click)="queryDetail(row,'D')">{{row.planCash}}</a>
            </td>
            <td>{{row.planCashRate}}</td>
            <!-- 时间（分钟） -->
            <td nzAlign="center">{{row.planTime}}</td>
            <td nzAlign="center">{{row.planCashTime}}</td>
            <td nzAlign="center">{{row.planCashTimeRate}}</td>
            <!-- 天窗兑现情况及未完成原因分析 -->
            <td>{{row.reason}}</td>
          </tr>

          <tr *ngFor="let row of main.tableData.sum">
            <td class="leftLable" colspan="3">合计</td>
            <!-- 申请兑现情况 -->
            <!-- 次数 -->
            <td>
              <!-- {{row.applyCount}} -->
              <a href="javascript:void(0)" (click)="queryDetail(row,'A')">{{row.applyCount}}</a>
            </td>
            <td>
              <!-- {{row.applyInplanCount}} -->
              <a href="javascript:void(0)" (click)="queryDetail(row,'B')">{{row.applyInplanCount}}</a>
            </td>
            <td>{{row.applyCountRate}}</td>
            <!-- 时间（分钟） -->
            <td nzAlign="center">{{row.applyTime}}</td>
            <td nzAlign="center">{{row.applyInplanTime}}</td>
            <td nzAlign="center">{{row.applyTimeRate}}</td>
            <!-- 计划兑现情况 -->
            <!-- 次数 -->
            <td>
              <!-- {{row.planCount}} -->
              <a href="javascript:void(0)" (click)="queryDetail(row,'C')">{{row.planCount}}</a>
            </td>
            <td>
              <!-- {{row.planCash}} -->
              <a href="javascript:void(0)" (click)="queryDetail(row,'D')">{{row.planCash}}</a>
            </td>
            <td>{{row.planCashRate}}</td>
            <!-- 时间（分钟） -->
            <td nzAlign="center">{{row.planTime}}</td>
            <td nzAlign="center">{{row.planCashTime}}</td>
            <td nzAlign="center">{{row.planCashTimeRate}}</td>
            <!-- 天窗兑现情况及未完成原因分析 -->
            <td>{{row.reason}}</td>
          </tr>
        </table>
      </nz-spin>
      <!-- <div class="tableBottomBar">
        <div>填报人：王海龙</div>
        <div>
          审批：xxx
        </div>
        <div>
          填报日期：2019年10月31日
        </div>
      </div> -->
    </div>
  </div>
</div>

<nz-modal [(nzVisible)]="detail.visible" nzTitle="详情" (nzOnCancel)="detail.closeModal()" [nzFooter]="detail.footer"
  [nzBodyStyle]="{width: '1200px'}" nzWidth="1200px" class="modalPanel tctj tctj-day">
  <nz-spin [nzSpinning]="detailLoading">
    <nz-table #basicTable [nzData]="detail.tableData" nzSize="small" [nzLoadingDelay]="1000" nzBordered
      [nzShowPagination]="false" [nzFrontPagination]="false" [nzScroll]="lockHeadScroll">
      <thead>
        <tr>
          <th nzWidth="100px" nzAlign="center">作业日期</th>
          <th nzWidth="80px" nzAlign="center">作业等级</th>
          <th nzWidth="100px" nzAlign="center">作业类型</th>
          <th nzAlign="center">作业项目</th>
          <th nzWidth="80px" nzAlign="center">作业行别</th>
          <th nzWidth="100px" nzAlign="center">作业线路</th>
          <th nzWidth="100px" nzAlign="center">作业地点</th>
          <th nzWidth="100px" nzAlign="center">作业开始时间</th>
          <th nzWidth="100px" nzAlign="center">作业结束时间</th>
          <th nzWidth="100px" nzAlign="center">作业负责人</th>
          <th nzWidth="100px" nzAlign="center">部门</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of basicTable.data;index as i">
          <td nzAlign="center">
            <!-- {{data.dtWorkday}} -->
            <div class="cmiddle" style="max-height:105px;">{{data.dtWorkday}}</div>
          </td>
          <td nzAlign="center">
            <div class="cmiddle" style="max-height:105px;">{{data.vcLevel}}</div>
          </td>
          <td>
            <div class="cmiddle" style="max-height:105px;">{{data.vcType}}</div>
          </td>
          <td>
            <div class="cmiddle" style="max-height:105px;">{{data.vcProject}}</div>
          </td>
          <td>
            <div class="cmiddle" style="max-height:105px;">{{data.vcSgdirectoryname}}</div>
          </td>
          <td>
            <div class="cmiddle" style="max-height:105px;">{{data.vcSgroute}}</div>
          </td>
          <td nzAlign="center">
            <div class="cmiddle" style="max-height:105px;">{{data.vcWorkplace}}</div>
          </td>
          <td nzAlign="center">
            <!-- {{data.vcSkywinstime}} -->
            <div class="cmiddle" style="max-height:105px;">{{data.vcSkywinstime}}</div>
          </td>
          <td nzAlign="center">
            <!-- {{data.vcSkywinetime}} -->
            <div class="cmiddle" style="max-height:105px;">{{data.vcSkywinetime}}</div>
          </td>
          <td nzAlign="center">
            <!-- {{data.vcWaperson}} -->
            <div class="cmiddle" style="max-height:105px;">{{data.vcWaperson}}</div>
          </td>
          <!-- <td>
            <div class="cmiddle" style="max-height:105px;">{{data.code}}</div>
          </td> -->
          <td nzAlign="center">
            <!-- {{data.workOrg}} -->
            <div class="cmiddle" style="max-height:105px;">{{data.workOrg}}</div>
          </td>
        </tr>
      </tbody>
    </nz-table>
    <div class="pagination-bar">
      <div class="pageWrap">
        每页
        <nz-select [(ngModel)]="detail.selectedValue" (ngModelChange)="detail.selectedChange()">
          <nz-option nzValue="20" nzLabel="20"></nz-option>
          <nz-option nzValue="50" nzLabel="50"></nz-option>
          <nz-option nzValue="100" nzLabel="100"></nz-option>
          <nz-option nzValue="200" nzLabel="200"></nz-option>
        </nz-select>
        条&nbsp;&nbsp;&nbsp;总共<span class="pageTotal">{{detail.pageTotal}}</span>条
      </div>
      <div class="pageInation">
        <nz-pagination [nzPageSize]="detail.selectedValue" [nzPageIndex]="detail.pageIndex" [nzTotal]="detail.pageTotal"
          (nzPageIndexChange)="detail.pageIndexChange()"></nz-pagination>
      </div>
    </div>
  </nz-spin>
</nz-modal>